<div class="nested-list-container">
  <h1 class="page-heading">分类管理系统</h1>
  <div class="description">
    <nz-alert nzType="info" nzMessage="模块说明"
      nzDescription="分类管理系统用于管理图书馆的图书分类层级结构。支持多级分类创建、编辑、删除、拖拽排序等功能，采用Vue.js Key绑定策略优化树形结构的渲染性能。" nzShowIcon>
    </nz-alert>
  </div>
  <div class="statistics-panel">
    <div nz-row [nzGutter]="20">
      <div nz-col [nzSpan]="6">
        <div class="stat-card">
          <div class="stat-icon categories">
            <i nz-icon nzType="menu"></i>
          </div>
          <div class="stat-info">
            <h3>{{ totalCategories }}</h3>
            <p>总分类数</p>
          </div>
        </div>
      </div>
      <div nz-col [nzSpan]="6">
        <div class="stat-card">
          <div class="stat-icon levels">
            <i nz-icon nzType="sort-ascending"></i>
          </div>
          <div class="stat-info">
            <h3>{{ maxDepth }}</h3>
            <p>最大层级</p>
          </div>
        </div>
      </div>
      <div nz-col [nzSpan]="6">
        <div class="stat-card">
          <div class="stat-icon books">
            <i nz-icon nzType="read"></i>
          </div>
          <div class="stat-info">
            <h3>{{ totalBooks }}</h3>
            <p>图书总数</p>
          </div>
        </div>
      </div>
      <div nz-col [nzSpan]="6">
        <div class="stat-card">
          <div class="stat-icon strategy">
            <i nz-icon nzType="cluster"></i>
          </div>
          <div class="stat-info">
            <h3>{{ keyType }}</h3>
            <p>Key策略</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="control-panel">
    <form nz-form nzLayout="inline" class="control-form">
      <nz-form-item>
        <nz-form-label>快速操作</nz-form-label>
        <nz-form-control>
          <div class="flex items-center gap-2">
            <button nz-button nzType="primary" (click)="addRootCategory()" [nzLoading]="loading">
              <i nz-icon nzType="plus"></i> 添加根分类
            </button>
            <button nz-button nzType="primary" (click)="expandAll()" [nzLoading]="loading">
              <i nz-icon nzType="down"></i> 展开全部
            </button>
            <button nz-button nzType="primary" (click)="collapseAll()" [nzLoading]="loading">
              <i nz-icon nzType="up"></i> 收起全部
            </button>
            <button nz-button nzType="primary" (click)="quickDemo()" [nzLoading]="loading">
              <i nz-icon nzType="bulb"></i> 快速演示
            </button>
            <button nz-button nzType="primary" (click)="resetCategories()" [nzLoading]="loading">
              <i nz-icon nzType="redo"></i> 重置数据
            </button>
          </div>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item style="margin-top: 10px;">
        <nz-form-label>图书操作</nz-form-label>
        <nz-form-control>
          <div class="flex items-center gap-2">
            <button nz-button nzType="primary" (click)="generateBooks(10)">生成10本图书</button>
            <button nz-button nzType="primary" (click)="addItem()">添加项</button>
            <button nz-button nzType="primary" (click)="removeItem()">删除项</button>
            <button nz-button nzType="primary" (click)="shuffleList()">打乱顺序</button>
            <button nz-button nzType="primary" (click)="insertRandomBook()">插入元素</button>
            <button nz-button nzType="primary" (click)="deleteRandomBook()">删除元素</button>
            <button nz-button nzType="primary" (click)="replaceAllBooks()">替换所有</button>
            <button nz-button nzType="primary" (click)="appendToEnd()">尾部追加</button>
            <button nz-button nzType="primary" (click)="stepInsert()">步步插入</button>
            <button nz-button nzType="primary" (click)="insertToMiddle()">中间插入</button>
            <button nz-button nzType="primary" (click)="partialUpdate()">局部更新</button>
          </div>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item style="margin-top: 10px;">
        <nz-form-label>性能测试操作</nz-form-label>
        <nz-form-control>
          <div class="flex items-center gap-2">
            <button nz-button [nzType]="keyType === 'id' ? 'primary' : 'default'"
              (click)="toggleKeyType('id')">ID作为Key</button>
            <button nz-button [nzType]="keyType === 'index' ? 'primary' : 'default'"
              (click)="toggleKeyType('index')">Index作为Key</button>
            <button nz-button [nzType]="keyType === 'none' ? 'primary' : 'default'"
              (click)="toggleKeyType('none')">无Key</button>
            <button nz-button nzType="primary" (click)="autoTestReuse()">自动测试复用（单次）</button>
            <button nz-button nzType="primary" (click)="autoTestBatchAndExportExcel()">批量测试并导出Excel</button>
            <button nz-button nzType="primary" (click)="exportReuseStatsToExcel()">导出Excel（当前）</button>
          </div>

        </nz-form-control>
      </nz-form-item>
    </form>
  </div>

  <div class="performance-metrics" style="margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 4px;">
    <h3 style="margin: 0 0 10px 0; color: #409EFF;">性能指标</h3>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px;">
      <div class="metric-item">
        <span class="metric-label">渲染时间：</span>
        <span class="metric-value" style="color: #e67e22; font-weight: bold;">{{ renderTime || '0' }} ms</span>
      </div>
      <div class="metric-item">
        <span class="metric-label">DOM创建数：</span>
        <span class="metric-value" style="color: #409EFF;">{{ domTrackStats.created || 0 }}</span>
      </div>
      <div class="metric-item">
        <span class="metric-label">DOM复用数：</span>
        <span class="metric-value" style="color: #67C23A;">{{ domTrackStats.reused || 0 }}</span>
      </div>
      <div class="metric-item">
        <span class="metric-label">DOM销毁数：</span>
        <span class="metric-value" style="color: #F56C6C;">{{ domTrackStats.destroyed || 0 }}</span>
      </div>
      <div class="metric-item">
        <span class="metric-label">DOM复用率：</span>
        <span class="metric-value" style="color: #909399; font-weight: bold;">{{ reuseRate }}%</span>
      </div>
    </div>
  </div>
  <div *ngIf="renderTime" style="margin-bottom:12px;color:#e67e22;font-weight:bold;">
    本次渲染耗时：{{ renderTime }} ms<br>
    节点创建：{{ domTrackStats.created }}，复用：{{ domTrackStats.reused }}，销毁：{{ domTrackStats.destroyed }}，复用率：{{ reuseRate }}%
  </div>
  <div class="book-operations-display"
    style="margin: 20px 0; border: 1px solid #DCDFE6; padding: 15px; border-radius: 4px;">
    <h3>图书数据预览 ({{ books.length }} 条)</h3>
    <div style="max-height: 200px; overflow-y: auto; border: 1px solid #EBEEF5; padding: 10px; margin-top: 10px;">
      <span *ngFor="let book of books; trackBy: trackById" [attr.data-id]="book.id"
        style="display: inline-block; padding: 5px; margin: 3px; background-color: #ECF5FF; border-radius: 3px; font-size: 12px;">
        {{ book.title }}
      </span>
      <p *ngIf="books.length === 0" style="color: #909399;">暂无图书数据，请点击上方按钮生成。</p>
    </div>
  </div>
  <div *ngIf="showAcademicTestList" class="academic-test-list">
    <span *ngFor="let book of academicBooks;  let i = index trackBy: trackById" domTrack
      [id]="keyType === 'id' ? book.id : i" [attr.data-id]="book.id"
      style="padding: 5px; border: 1px solid #eee; margin: 2px; display: inline-block;">{{
      book.title }}</span>
  </div>


  <div class="tree-container" *ngIf="categoryTree.length > 0">
    <div class="tree-operations">
      <p class="operation-hint">
        <i nz-icon nzType="info-circle"></i>
        可以拖拽分类进行排序，点击按钮进行编辑操作
      </p>
    </div>
    <div class="tree-list">
      <ng-template #categoryNodeTemplate let-category="category">
        <div class="category-item">
          <div class="category-header">
            <div class="category-main">
              <i *ngIf="category.children && category.children.length > 0" [class]="[
                  'expand-icon',
                  'anticon',
                  'anticon-right',
                  isExpanded(category.id) ? 'expanded' : ''
                ]" nz-icon nzType="right" (click)="toggleExpand(category)">
              </i>
              <span *ngIf="!category.children || category.children.length === 0" class="expand-placeholder"></span>
              <span class="category-name" (click)="viewCategoryBooks(category)">{{ category.name }}（{{
                category.bookCount }}本）</span>
              <nz-tag nzSize="small" [nzColor]="getStatusType(category.status)">
                {{ category.status }}
              </nz-tag>
            </div>
            <div class="category-actions" (click)="$event.stopPropagation()">
              <button nz-button nzSize="small" nzType="primary" (click)="addSubCategory(category)">
                <i nz-icon nzType="plus"></i>
              </button>
              <button nz-button nzSize="small" nzType="primary" (click)="editCategory(category)">
                <i nz-icon nzType="edit"></i>
              </button>
              <button nz-button nzSize="small" nzType="primary" (click)="deleteCategory(category)">
                <i nz-icon nzType="delete"></i>
              </button>
            </div>
          </div>

          <div *ngIf="isExpanded(category.id) && category.children && category.children.length > 0"
            class="category-children">
            <ng-container *ngFor="let child of category.children; trackBy: trackById">
              <ng-template [ngTemplateOutlet]="categoryNodeTemplate"
                [ngTemplateOutletContext]="{ category: child }"></ng-template>
            </ng-container>
          </div>
        </div>
      </ng-template>

      <ng-container *ngFor="let category of categoryTree; trackBy: trackById">
        <ng-template [ngTemplateOutlet]="categoryNodeTemplate"
          [ngTemplateOutletContext]="{ category: category }"></ng-template>
      </ng-container>
    </div>
  </div>

  <div class="empty-state" *ngIf="categoryTree.length === 0">
    <div class="empty-icon">
      <i nz-icon nzType="folder-open"></i>
    </div>
    <h3>暂无分类</h3>
    <p>当前没有图书分类，点击"重置数据"开始创建分类结构</p>
    <button nz-button nzType="primary" (click)="resetCategories()" [nzLoading]="loading">
      初始化分类
    </button>
  </div>

  <nz-modal [(nzVisible)]="editDialogVisible" [nzTitle]="editingCategory ? '编辑分类' : '添加分类'" [nzWidth]="'40%'"
    (nzOnCancel)="editDialogVisible = false; editingCategory = null;">
    <ng-container *nzModalContent>
      <form nz-form [nzLayout]="'horizontal'">
        <nz-form-item>
          <nz-form-label [nzSpan]="6">分类名称</nz-form-label>
          <nz-form-control [nzSpan]="14">
            <input nz-input [(ngModel)]="currentCategory.name" name="categoryName">
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="6">图书数量</nz-form-label>
          <nz-form-control [nzSpan]="14">
            <nz-input-number [(ngModel)]="currentCategory.bookCount" [nzMin]="0" name="bookCount"></nz-input-number>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="6">分类描述</nz-form-label>
          <nz-form-control [nzSpan]="14">
            <textarea nz-input [(ngModel)]="currentCategory.description" name="description" nzAutosize></textarea>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="6">状态</nz-form-label>
          <nz-form-control [nzSpan]="14">
            <nz-select [(ngModel)]="currentCategory.status" nzPlaceHolder="请选择状态" name="status">
              <nz-option nzLabel="活跃" nzValue="active"></nz-option>
              <nz-option nzLabel="禁用" nzValue="disabled"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </form>
    </ng-container>
    <div *nzModalFooter>
      <button nz-button nzType="default" (click)="editDialogVisible = false">取 消</button>
      <button nz-button nzType="primary" (click)="saveCategory()">确 定</button>
    </div>
  </nz-modal>

</div>